<template>
    <div>
        <!-- echarts -->
        <div id="main" class="main_container"></div>
    </div>

</template>

<script>

export default {
    data() {
        return {}
    },
    mounted() {
        this.initCharts()
    },
    methods: {
        initCharts() {
            // 初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById("main"))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: "ECharts 入门示例",
                },
                legend: {
                    orient: 'vertical',//图例列表的布局朝向, vertical 垂直,horizontal 水平
                    left: 'center',//图例位置
                    icon: "roundRect",//图例样式 ,'circle' 圆形, 'rect'方块, 'roundRect' 方块圆角, 'triangle' 三角形, 'diamond' 菱形, 'pin' 圆形, 'arrow' 箭头, 'none' 无; 可以通过 'image://url' 设置为图片，其中 url 为图片的链接
                },

                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                },
                yAxis: {

                },
                series: [
                    {
                        name: "销量",
                        type: "bar",
                        data: [25, 20, 36, 10, 10, 20],
                    },
                ],
            })
        },
    },
}

</script>

<style lang="less" scoped>
.main_container {
    margin-top: 20px;
    margin-left: 20px;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    width: 30%;
    height: 400px;
    overflow: hidden;
}
</style>